<template>
  <page-header-wrapper>
    <a-card :bordered='false'>
      <div class='table-page-search-wrapper'>
        <a-form layout='inline'>
          <a-row :gutter='24'>
            <a-col :md='3' :sm='24'>
              <a-form-item>
                <a-select placeholder='请选择省' v-model='queryParam.province' @change='onProvinceChange'>
                  <a-select-option :value='item.provinceid' v-for='item in provinceList' :key='item.id'>{{
                      item.province
                    }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md='3' :sm='24'>
              <a-form-item>
                <a-select placeholder='请选择市' v-model='queryParam.city' @change='onCityChange'>
                  <a-select-option :value='item.cityid' v-for='item in cityList' :key='item.id'>{{
                      item.city
                    }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md='3' :sm='24'>
              <a-form-item>
                <a-select placeholder='请选择区' v-model='queryParam.area'>
                  <a-select-option :value='item.areaid' v-for='item in areaList' :key='item.id'>{{
                      item.area
                    }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md='4' :sm='24'>
              <span class='table-page-search-submitButtons'>
                <a-button type='primary' @click='handleSearch(true)' icon='search'>查询</a-button>
              </span>
            </a-col>
            <a-col :md='2' :sm='24' :offset='9'>
              <a-button type='primary' icon='plus' @click='handleAdd'>新增</a-button>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <s-table
        ref='table'
        size='default'
        rowKey='id'
        :columns='columns'
        :data='loadData'
        showPagination='auto'
        :pagination='pagination'
      >
        <template slot='img_url' slot-scope='text'>
          <a-avatar shape='square' :size='64' icon='skin' :src='text' />
        </template>
        <a-tag :color="text == 1 ? 'blue' : 'red'" slot='status' slot-scope='text'>{{ text | statusFilter }}</a-tag>
        <span slot='action' slot-scope='text, record'>
          <template>
            <a @click='handleEdit(record)'>编辑</a>
            <a-divider type='vertical' />
            <a @click='handleDelete(record)'>删除</a>
          </template>
        </span>
      </s-table>

      <create-form ref='createModal' @ok='handleSearch' :extraPramas='extraPramas' />
    </a-card>
  </page-header-wrapper>
</template>

<script>
import {
  clothesActivityCity,
  clothesActivityCityAdd,
  clothesActivityCityEdit,
  clothesActivityCityDel
} from '@/api/activity'
import { provinceLink, cityLink, areaLink } from '@/api/notControl'
import CreateForm from './modules/activityCityForm'
import formTableMixin from '@/mixins/formTableMixin'

const columns = [
  {
    title: '省',
    dataIndex: 'province'
  },
  {
    title: '市',
    dataIndex: 'city'
  },
  // {
  //   title: '区',
  //   dataIndex: 'area'
  // },
  {
    title: '操作',
    dataIndex: 'action',
    width: '150px',
    scopedSlots: { customRender: 'action' }
  }
]

const STATUS = {
  1: '是',
  0: '否'
}

export default {
  name: 'ActivityCity',
  mixins: [formTableMixin],
  components: {
    CreateForm
  },
  data() {
    this.columns = columns
    this.editAction = clothesActivityCityEdit
    this.addAction = clothesActivityCityAdd
    this.delAction = clothesActivityCityDel
    this.listAction = parameter =>
      clothesActivityCity(parameter).then(res => {
        const data = res.data.data
        data.forEach(item => {
          item.activity_id = this.$route.params.activity_id
        })
        this.extraPramas = { activity_id: this.$route.params.activity_id }
        return res
      })
    return {
      provinceList: [],
      cityList: [],
      areaList: [],
      extraPramas: {}
    }
  },
  filters: {
    statusFilter(key) {
      return STATUS[key]
    }
  },
  created() {
    provinceLink().then(res => {
      this.provinceList = res.data
    })
  },
  methods: {
    onProvinceChange(provinceid) {
      return cityLink({ provinceid }).then(res => {
        this.cityList = res.data
      })
    },
    onCityChange(cityid) {
      return areaLink({ cityid }).then(res => {
        this.areaList = res.data
      })
    }
  }
}
</script>
